<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="登录" left-arrow @click-left="$router.back()" />
        </header>
        <main class="content">
            <van-form @submit="onSubmit" style="padding-top:20px;">
                <van-cell-group inset>
                    <van-field v-model="username" name="username" label="用户名" placeholder="用户名" :rules="[
                        { required: true, message: '请填写用户名' },
                        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]" />
                    <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                    <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码"
                        :rules="[{ required: true, message: '请填写短信验证码' }, { pattern: /^\d{6}$/, message: '请输入六位数字验证码' }]">
                        <template #button>
                            <van-button size="small" type="primary" @click="sendcode" :disabled="msg != '获取验证码'">
                                {{ msg }}</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        登录
                    </van-button>
                </div>
            </van-form>
            <div class="text">
                <p>账号密码登录</p>
                <p @click="$router.push('/register')">手机快速注册</p>
            </div>
        </main>
    </div>
</template>

<script setup>
import request from '@/utils/request';
import { ref } from 'vue';
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router'
import md5 from 'blueimp-md5'
const router = useRouter()
const username = ref('');
const password = ref('');
const sms = ref('');
const msg = ref('获取验证码')
const timer = ref(null); // 定时器
const count = ref(10) //  倒计时的数字
const onSubmit = (values) => {
    console.log( values);
    request.post('/login', {
        username: username.value, // values.username
        password: md5(password.value), // values.password
        sms: sms.value
    }).then(res => {
        if (res.data.code == 200) {
            // 说明账号密码输入正确，登录成功
            // 存储token和用户名
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('username', username.value)
            // localStorage.setItem('username', values.username)
            // 提示登录成功
            showSuccessToast(res.data.message)
            // 跳转页面
            router.push('/user')
        } else {
            // 提示登录失败
            showFailToast(res.data.message);
        }
    })
};
const sendcode = () => {
    request.get('/code').then(res => {
        if (res.data.code == 200) {
            // 回显到输入框里
            sms.value = res.data.data
        }
    })
    msg.value = 10 + '秒后重新发送'
    timer.value = setInterval(() => {
        // 每一秒数值-1
        count.value--
        // 当数值减到0时
        if (count.value == 0) {
            // 清除定时器
            clearInterval(timer.value)
            // 按钮的文字应该变回 获取验证码
            msg.value = '获取验证码'
            // count的值也恢复成60
            count.value = 10
        } else {
            // 按钮的文字显示 ： 多少秒后重新发送
            msg.value = count.value + '秒后重新发送'
        }
    }, 1000)
}

</script>
<style lang="scss" scoped>
.text {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    color: rgb(111, 112, 112)
}
</style>